<template>
  <div class="redemption-page">
    <!-- 关闭按钮：返回上一页（di10） -->
    <button class="close-btn" @click="backToDi10">×</button>
    <!-- 标题 -->
    <h1 class="title">领取二维码</h1>
    <!-- 更多操作按钮 -->
    <span class="more-btn">...</span>

    <!-- 顶部校徽区域 -->
    <div class="header">
      <img src="/static/logo.png" alt="电子科技大学校徽" class="logo" />
      <p class="university-name">电子科技大学</p>
      <p class="university-english">University of Electronic Science and Technology of China</p>
    </div>

    <!-- 核心内容区域 -->
    <div class="content">
      <h2 class="status-title">周边已核销</h2>
      <p class="status-english">Merchandise redemption completed.</p>
      <!-- 已核销印章图片 -->
      <img src="/static/tp/z3.png" alt="已核销印章" class="stamp" />
      <p class="support-text">遇到问题请联系现场工作人员</p>
      <p class="support-english">See staff for support at the venue.</p>
    </div>

    <!-- 技术支持文字 -->
    <p class="tech-support">成电芯伙伴提供技术支持</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 关闭页面：返回上一页（di10-二维码领取页）
const backToDi10 = () => {
  uni.navigateBack({
    delta: 1,
    success: () => {
      console.log('成功返回di10（二维码领取页）');
    },
    fail: (err) => {
      console.error('返回di10失败:', err);
      alert('返回失败，请重试');
    }
  });
};
</script>

<style scoped>
.redemption-page {
  padding: 20px;
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
}

.close-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

.title {
  text-align: center;
  font-size: 20px;
  margin: 20px 0;
}

.more-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
}

.header {
  background-color: #005daa;
  color: #fff;
  padding: 15px;
  text-align: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.logo {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.university-name {
  font-size: 18px;
  margin: 0;
}

.university-english {
  font-size: 14px;
  margin: 5px 0 0 0;
}

.content {
  background-color: #fff;
  padding: 30px;
  text-align: center;
}

.status-title {
  font-size: 22px;
  margin-bottom: 10px;
}

.status-english {
  font-size: 14px;
  color: #666;
  margin-bottom: 30px;
}

.stamp {
  width: 150px;
  height: 150px;
  margin-bottom: 30px;
}

.support-text {
  font-size: 16px;
  margin-bottom: 5px;
}

.support-english {
  font-size: 14px;
  color: #666;
}

.tech-support {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin-top: 20px;
}
</style>